<template>
  <div style="height: 100%">
    <roleListMobile v-show="flagW" :Place = "Place"></roleListMobile>
    <div v-show="!flagW" class="roleList copy">
      <canvas class="staffCharDraw" width="1200" height="800"></canvas>
      <div class="roleListLeft">
        <ul>
          <li v-for="o in rolel" :key="o.id" :num="o.id" @click="roleClick"
              class="role-style" v-t-click="o">
            <span class="roleId">{{ o.id >= 10 ? o.id : "0"+o.id }}</span>&nbsp;&nbsp;&nbsp;
            <span class="svgJob">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30">
                <use :xlink:href="'#' + o.job"></use>
              </svg>
            </span>&nbsp;&nbsp;
            <span>{{ o.name }}</span>
          </li>
        </ul>
      </div>
      <div class="roleDetail">
        <canvas class="detailDraw" width="400" height="300"></canvas>
        <div class="roleDetailContent">
          <div class="roleDetailInfo">
            <div class="roleDetailInfoTop">
              <transition name="roleDetailInfoTop"
                          enter-active-class="animated fadeInRight"
                          leave-active-class="animated fadeOutLeft"
                          :duration="{ enter: 800, leave: 100 }"
                          mode="out-in"
              >
                <component v-bind:is="view" :Content="contentName"></component>
              </transition>
            </div>
            <div class="roleDetailInfoBack">
              <transition name="roleDetailInfoBack"
                          enter-active-class="animated fadeInRight"
                          leave-active-class="animated fadeOutLeft"
                          :duration="{ enter: 700, leave: 80 }"
                          mode="out-in"
              >
                <component v-bind:is="view" :Content="contentEname"></component>
              </transition>
            </div>
          </div>
          <div class="roleDetailDesc">
            <transition name="roleDetailInfoBack"
                        enter-active-class="animated fadeInDown"
                        leave-active-class="animated fadeOutDown"
                        :duration="{ enter: 700, leave: 100 }"
                        mode="out-in"
            >
              <component v-bind:is="view" :Content="introduction"></component>
            </transition>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import viewOne from '@/components/viewOne'
import viewTwo from '@/components/viewTwo'
import roleListMobile from '@/components/roleListMobile'
import { mapState, mapMutations } from 'vuex'

export default {
  props: ["Place"],
  name: "roleList",
  data() {
    return {
      flag: true,
      flagW: false,     //用于宽度判断
      speed: 30,
      rolel: [],
      view: 'viewOne',
      contentName: null,
      contentEname: null,
      introduction: null
    }
  },
  components: {
    viewOne,
    viewTwo,
    roleListMobile
  },
  directives: {
    'tClick': function(el,binding,vnode) {
      if(binding.value.id == 1 && binding.value.active == 1){     // 执行第一个元素的click事件
        el.click()
      }
    }
  },
  methods: {
    ...mapMutations(['setRoleL']),
    // 获取数据库角色信息
    async getRole() {
      // console.log("start search!!!");
      await this.axios.get('http://localhost:4000/',
          {
             params: {
                "place": this.Place
             }
          }).then((response) => {
        this.rolel = response.data;
        this.setRoleL(response.data);
        // console.log(this.rolel);
        this.getJob();
      })
    },
    // 获取角色职业图标信息
    async getJob() {
      try {
        await this.axios.get('./db/jobSvgData.json').then((response) => {
          const res = response.data.jobData;
          let e = document.querySelectorAll('.role-style');
          for(let i = 0; i < e.length; i++) {
            let ev = e[i].children[1].children[0].children[0]
            for(let j = 0; j < res.length; j++) {
              if(ev.getAttribute("xlink:href") == '#'+res[j].job) {
                // this.rolel[i].svgPath = res[j].svg
                ev.innerHTML = res[j].svg
              }
            }
          }
        })
      } catch (error) {
        console.log(error.message);
      }
    },
    // 点击事件
    roleClick(event) {
      if(this.flag == true) {
        this.flag = false;               // 防止多次点击
        let e = event.currentTarget;      // 获取点击对象
        let o, move, stop = 0;
        // console.log(e.children[1].children[0].children[0].getAttribute("xlink:href"));

        // 获取点击元素距离显示位置
        for(let i = 1; i <= this.rolel.length; i++) {
          if(e.getAttribute("num") == this.rolel[i-1].id) {
            move = i - parseInt(this.rolel.length/3)
            o = i;
          }
        }

        if(move == 0) { this.flag = true; return }

        // 动态组件切换信息，加载动画
        this.view = this.view == 'viewOne' ? 'viewTwo' : 'viewOne'

        // 将列表所有数据修改为未选择
        for(let i = 1; i <= this.rolel.length; i++) {
          // active不过是用于处理 v-t-click 第一次刷新时标亮的干员，不必理会
          this.rolel[i-1].active = false;

          e.parentNode.children[i-1].style.color = "#d5d6d9";
          e.parentNode.children[i-1].style.fill = "#d5d6d9";
          e.parentNode.children[i-1].style.fontSize = "24px";
          e.parentNode.children[i-1].children[0].style.fontSize = "10px"
          e.parentNode.children[i-1].children[1].style.height = "24px"
          e.parentNode.children[i-1].children[1].style.width = "24px"
        }
        // 滚动列表
        let time = setInterval(() => {
          if(move > 0) {
            this.rolel.push(this.rolel[0]);
            this.rolel.shift();
          } else {
            this.rolel.unshift(this.rolel[this.rolel.length - 1]);
            this.rolel.pop();
          }
          stop++;
          if(stop === Math.abs(move)) {
            clearInterval(time);
            e.style.color = "#22bbff";
            e.style.fill = "#22bbff";
            e.style.fontSize = "28px";
            e.children[0].style.fontSize = "14px"
            e.children[1].style.height = "26px"
            e.children[1].style.width = "26px"
          }
        }, this.speed)
        // 背景和信息更新
        this.roleImgCanvas(this.rolel[o-1].img, this.rolel[o-1].Imgwidth, this.rolel[o-1].Imgheight);
        this.roleDetailChange(this.rolel[o-1]);
        this.flag = true;
      }
    },
    // 人物背景的切换
    roleImgCanvas(img, width, height) {
      let moveX = 250;
      let roleC = document.querySelector('.staffCharDraw');
      let roleI = roleC.getContext("2d");
      let detail = document.querySelector('.detailDraw');
      let detailG = detail.getContext("2d");
      // 线条绘制
      let grdr = roleI.createLinearGradient(0,100,400,100);
      let grdc = roleI.createLinearGradient(90,0,90,250);
      // 图片背景
      let roleImg = new Image();

      // 清理画布
      roleI.clearRect(250,-75, 800, 1000);

      roleImg.src = img;
      roleImg.onload = function() {
        roleI.drawImage(roleImg, 260, -75, width, height);
        // 横线
        grdr.addColorStop(0, "black");
        grdr.addColorStop(0.5, "#d5d6d9");
        grdr.addColorStop(1, "black");
        detailG.fillStyle = grdr;
        detailG.fillRect(0, 100, 400, 1);
        // 竖线
        grdc.addColorStop(0, "black");
        grdc.addColorStop(0.5, "#d5d6d9");
        grdc.addColorStop(1, "black");
        detailG.fillStyle = grdc;
        detailG.fillRect(90, 0, 1, 250);
      }
      this.moveImgCanvas(roleI, detailG, roleImg, width, height, grdr, grdc);
    },
    // 背景移动动画
    moveImgCanvas(roleI, detailG,roleImg, width, height, grdr, grdc) {
      let moveX = 260;
      let time = setInterval(() => {
        if(moveX > 200) {
          roleI.clearRect(moveX,-75, 800, 1000);
          // detailG.clearRect(0,0, 400, 300);
          moveX -= 10;
          roleI.drawImage(roleImg, moveX, -75, width, height);
          // // 横线
          // grdr.addColorStop(0, "black");
          // grdr.addColorStop(0.5, "#d5d6d9");
          // grdr.addColorStop(1, "black");
          // detailG.fillStyle = grdr;
          // detailG.fillRect(0, 100, 400, 1);
          // // 竖线
          // grdc.addColorStop(0, "black");
          // grdc.addColorStop(0.5, "#d5d6d9");
          // grdc.addColorStop(1, "rgba(0,0,0,0.2)");
          // detailG.fillStyle = grdc;
          // detailG.fillRect(90, 0, 1, 250);
        } else {
          clearInterval(time);
        }
      },10)
    },
    // 人物信息的切换
    roleDetailChange(role) {
      // document.querySelector('.roleDetailInfoTop').children[0].innerHTML = role.name;
      this.contentName = role.name;
      // document.querySelector('.roleDetailInfoBack').children[0].innerHTML = role.Ename;
      this.contentEname = role.Ename;
      // document.querySelector('.roleDetailDesc').children[0].innerHTML = role.introduction;
      this.introduction = role.introduction;
    }
  },
  mounted() {
    this.getRole();
    if(this.$store.state.screenWidth < 800) {
      this.flagW = true
    }
  },
  watch: {
    // v-show时的数据加载方法
    // Place(newValue, oldValue) {
    //   oldValue = newValue;        // 更新父组件传递给子组件的地区数据
    //   // console.log(this.Place);
    //   this.getRole();             // 但点击新地区时，数据更换
    // }
    // 显示器宽度判断
    '$store.state.screenWidth': function (val) {        //监听屏幕宽度变化
      if(val < 800) {
        this.flagW = true
      }
      else {
        this.flagW = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/style/common";

.staffCharDraw {
  position: absolute;
  z-index: -1;
}
.detailDraw {
  position: absolute;
  z-index: -1;
}

.roleList {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  .roleListLeft {
    width: 30%;
    height: 80%;
    margin-left: 85px;
    ul {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 24px;
      color: #d5d6d9;
      fill: #d5d6d9;
      .role-style {
        opacity: 0.9;
        height: 38px;
        display: flex;
        align-items: center;
        .roleId {
          font-size: 10px;
        }
        .svgJob {
          height: 24px;
          width: 24px
        }
      }
      .role-style:hover {
        //color: #f0f0f0 !important;
        //fill: #f0f0f0 !important;
        opacity: 1 !important;
      }
    }
  }

  .roleDetail {
    position: absolute;
    height: 300px;
    width: 400px;
    top: 11%;
    right: 15%;
    .roleDetailContent {
      height: 100%;
      width: 300px;
      padding-left: 105px;
      .roleDetailInfo {
        color: #fff;
        .roleDetailInfoTop {
          //height: 65px;
          //width: 200px;
          font-size: 3rem;
        }
        .roleDetailInfoBack {
          margin-top: 5px;
          font-size: 14px;
          font-weight: bold;
        }
      }
      .roleDetailDesc {
        color: #fff;
        margin-top: 30px;
        font-size: 12px;
        line-height: 25px;
      }
    }
  }
}

.roleListMobile {
  width: 100%;
  height: 100%;
}

</style>